<template>
  <div>
    <a-form :model="form" auto-label-width :layout="'vertical'" @submit-success="submit">
      <a-form-item field="roleKey" :label="t['角色名称']">
        <a-input v-model="form.roleName"></a-input>
      </a-form-item>
      <!-- <a-form-item field="roleKey" :label="t['权限字符']">
        <a-input v-model="form.roleKey"></a-input>
      </a-form-item>
      <a-form-item field="roleSort" :label="t['排序']" required>
        <a-input-number v-model="form.roleSort"></a-input-number>
      </a-form-item> -->
      <a-form-item field="remark" :label="t['备注']">
        <a-textarea v-model="form.remark" auto-size></a-textarea>
      </a-form-item>
      <a-form-item :label="t['角色分配']">
        <div class="w-full">
          <div>
            <a-checkbox v-model="checkStrictly" v-auth>{{ t["联动"] }}</a-checkbox>
          </div>
          <a-card class="tree w-full">
            <a-tree
              v-model:checked-keys="form.menuIds"
              v-model:half-checked-keys="halfCheckedKeys"
              block-node
              :data="treeData"
              :check-strictly="!checkStrictly"
              checkable
              checked-strategy="all"
            ></a-tree>
          </a-card>
        </div>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary">
          {{ t["保存"] }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { addRole, updateRole } from "@/api/service/user/roles";

import { nanoid } from "nanoid";
import { list } from "../data/curd";
import { form, showForm } from "../data/form";
import { treeData } from "../data/table";

const halfCheckedKeys = ref([]);
const t = translate("公共模块");

const loading = ref(false);
const checkStrictly = ref(false);

const submit = async () => {
  loading.value = true;
  if (!form.value.roleId) {
    form.value.roleKey = nanoid();
    await addRole(form.value);
  } else {
    await updateRole(form.value);
  }
  loading.value = false;
  list();
  showForm.value = false;
};
</script>

<style lang="scss" scoped>
.tree {
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}
</style>
